<template>
  <div class="dialog-box">
    <el-container
      v-bind:id="id"
      v-if="dialogVisible"
      :style="{ width: dialogWidth + 'px', height: dialogHight + 'px' }"
    >
      <div class="dialog-content">
        <el-header>
          <div @mousedown="mousedown">
            <h2 v-html="title"></h2>
            <div
              @click.stop="closeDialog()"
              style="position: absolute; top: 0px; right: 20px; cursor: pointer"
            >
              <span> X </span>
            </div>
          </div>
        </el-header>
        <el-main>
          <slot>这里是内容</slot>
        </el-main>
        <el-footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="closeDialog">确 定</el-button>
          </span>
        </el-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Window",
  props: {
    //map的唯一id值
    boxid: {
      type: String,
      default: function () {
        return (
          //"map-self-" + new Date() + ((Math.random() * 1000).toFixed(0) + "")
          "float-ball" + new Date().getTime()
        );
      },
    },
    boxtitle: {
      type: String,
      default: "",
    },
    boxdialogvisible: {
      type: Boolean,
      default: false,
    },
    dialogWidth: {
      type: Number,
      default: "500",
    },
    dialogHight: {
      type: Number,
      default: "500",
    },
  },
  watch: {
    boxdialogvisible(value, oldavlue) {
      this.dialogVisible = value;
    },
  },
  data() {
    return {
      dialogVisible: this.boxdialogvisible,
      title: this.boxtitle,
      id: this.boxid,
      selectElement: "",
    };
  },
  computed: {
    // dialogVisible: {
    //   get: function () {
    //     return this.$store.state.dialogVisible
    //   },
    //   set: function (newValue) {
    //     this.$store.commit('newDialogVisible', newValue)
    //   }
    // }
  },
  methods: {
    closeDialog(e) {
      this.dialogVisible = false;
      // this.$store.commit('closeDialog', false)
      this.$emit("closeDialog", false);
    },
    mousedown(event) {
      this.selectElement = document.getElementById(this.id);
      var div1 = this.selectElement;
      this.selectElement.style.cursor = "move";
      this.isDowm = true;
      var distanceX = event.clientX - this.selectElement.offsetLeft;
      var distanceY = event.clientY - this.selectElement.offsetTop;
      console.log("X:" + distanceX, "Y:" + distanceY);
      document.onmousemove = function (ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },
  },
};
</script>

<style scoped>
.dialog-content {
  position: relative;
  z-index: 16;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-container::before {
  content: "";
  background: #757575c9;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.box-dialog .el-container {
  z-index: 15;
}
.el-container {
  position: absolute;
  /* height: 500px;
  width: 500px; */
  border: 1px;
  top: 20%;
  left: 35%;
  border-radius: 2px;
  z-index: 8;
  box-shadow: 0px 0px 5px 0px #333;
}

.dialog-footer {
  text-align: right;
}

.el-main {
  background-color: white;
}

.el-footer {
  background-color: white;
}

.el-header {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>